<template>
    <div>
        <el-container>
            <el-container>
                <el-main class="input">
                    <div class="img">
                        <el-carousel height="500px" :interval="5000" arrow="always">
                            <el-carousel-item v-for="item in IMG" :key="item">
                                <img :src="item.src">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="search">
                        <h2>开始学习编程</h2>
                        <h4>日积月累，自有所成</h4>
<!--                        <el-row>-->
<!--                            <el-col :span="10" :offset="7"><el-input v-model="input" placeholder="搜索内容"></el-input></el-col>-->
<!--                            <el-col :span="1"><el-button type="primary" plain>搜索</el-button></el-col>-->
<!--                        </el-row>-->
                    </div>
                    <div class="img2">
                        <img style="width: 100%; height: 500px" src="@/assets/banner12.jpg" alt="">
                    </div>
                    <div class="search2">
                        <h2>在改变</h2>
                        <h4>超越自我，挑战未来</h4>
                    </div>
                    <div class="footer">
                        <img style="width: 100%; height: 240px" src="@/assets/footer-bg2.png" alt="">
                    </div>
                    <div class="text">
                        <p>万码奔腾-做最负责任的教育</p>
                        <p>万码教育旗下青岛青硬职业培训学校运营品牌</p>
                        <p><a href="" target="_blank" style="color: #27D0EE">鲁ICP备0000001号</a></p>
                        <p>Copyright © 2008-2023 <a href=""target="_blank" style="color: #27D0EE">www.wanmati.com</a> All rights
                            Reserved.</p>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

</template>

<script>
    export default {
        name: "WebIndexView",
        data() {
            return {
                input: '',
                IMG: [
                    require('@/assets/banner0.jpg'),
                    require('@/assets/banner3.jpg'),
               /* IMG:[
                    {src:'https://xu1655.top/lADPJwKt3cJd2QXNAljNBaA_1440_600.jpg_720x720q90g.jpg'},
                    {src:'https://xu1655.top/lADPD3W5W3qLGJfNAljNBaA_1440_600.jpg_720x720q90g.jpg'},*/
                ],
            }
        },
        created() {
            this.init();
        },
        methods: {
            init() {
                let that = this;
                if (typeof (WebSocket) == "undefined") {
                    console.log("你的浏览器不支持WebSocket");
                } else {
                    let socket = null;
                    console.log("你的浏览器支持WebSocket");
                    let id;
                    let socketUrl;
                    if(window.localStorage.getItem("student")!=null){
                        id =  JSON.parse(window.localStorage.getItem("student")).id;
                        socketUrl = "ws://localhost:8080/webSocket/"+"student:"+id;
                    }
                    else{
                        id = JSON.parse(window.localStorage.getItem("teacher")).id;
                        socketUrl = "ws://localhost:8080/webSocket/"+"teacher:"+id;
                    }

                    socket = new WebSocket(socketUrl);

                    socket.onopen = function (event) {
                            console.log("建立连接")
                    }
                    socket.onclose = function (event) {
                            console.log("断开连接")
                    }
                    socket.onmessage = function (event) {
                            console.log("收到消息"+event.data);
                            that.$notify({
                                title: '通知',
                                message: event.data,
                                type: 'success'
                            });
                    }
                    socket.onerror = function () {
                            console.log("通信错误")
                    }
                    window.onbeforeunload = function () {
                            socket.close();
                            console.log("连接关闭")
                    }
                }
            },
        }
    }
</script>

<style scoped>
    .input{
        margin-top: -15px;
    }

    h2{
        color: #999999;
        font-weight: 600;
        font-size: 50px;
        margin-bottom: 10px;
        margin-left: 80px;
    }

    h4{
        color: #999999;
        font-weight: 500;
        font-size: 22px;
        margin-left: 80px;
    }

    .img2{
        margin-top: 20px;
        width: 100%;
        height: 500px;
        position: relative;
    }

    .search2 h2{
        font-weight: 600;
        font-size: 50px;
        color: white;
        margin-left: 650px;
    }

    .search2 h4{
        font-size: 22px;
        font-weight: 600;
        color: white;
        margin-left: 640px;
    }

    .search2{
        position: absolute;
        margin-top: -350px;
    }

    .search3 h2{
        font-weight: 600;
        color: #000000;
        margin-left: 80px;
    }

    .search3 h4{
        font-size: 15px;
        color: #777;
        margin-left: 120px;
    }

    .footer{
        margin-top: 100px;
        width: 100%;
        position: relative;
    }

    .text{
        position: absolute;
        margin-top: -200px;
        margin-left: 500px;
        color: aliceblue;
    }

    p{
        text-align: center;
    }
</style>